<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>VUE TEST</title>
	<style>
		html body {padding: 20px;}
		td{min-width: 5em;}
		.btn-wrap1{text-align:right;}
		.btn-wrap2{text-align: left;}
		.spliter{text-align: center;}
		.spliter .ant-divider, .ant-divider-vertical {height: 96px;}
	</style>

	<script src="./nanny.js"></script>
	<script src="../src/home.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.4/vue.min.js"></script>
	<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/ant-design-vue/1.7.8/antd.css" />
	<script src="https://cdnjs.cloudflare.com/ajax/libs/ant-design-vue/1.7.8/antd.min.js"></script>
</head>
<body>
	<div id="app">
			<a-row :gutter="18">
				<a-col :span="11" class="btn-wrap1">
					first version: 
            <br>
					<input type="button" value="append column" @click="tb.addCellToAllRow(tdAppendInjecter)">
					<input type="button" value="append row" @click="tb.addNewRow(tdAppendInjecter)">
					<input type="button" value="insert left" @click="insertLeft">
					<input type="button" value="insert top" @click="insertTop">
					<br>
					<input type="button" value="split" @click="split">
					<input type="button" value="merge" @click="tb.merge(...mouseMoveTd);clearStyle('over');">
					<input type="button" value="delete column" @click="tb.deleteColumn(lastClickTd)" />
					<input type="button" value="delete row" @click="tb.deleteRow(lastClickTd)" />
				</a-col>
				<a-col :span="1" class="spliter">
					<a-divider type="vertical" />
				</a-col>
				<a-col :span="12" class="btn-wrap2">
					<div>round 2: </div>
					<input type="button" value="insert right" @click="insertRight" />
					<input type="button" value="insert bottom" @click="insertBottom" />
					<br>
					merge to td's ___: 
					<br>
					<input type="button" value="up" @click="mergeTo(0)" />
					<input type="button" value="right" @click="mergeTo(1)" />
					<input type="button" value="down" @click="mergeTo(2)" />
					<input type="button" value="left" @click="mergeTo(3)" />
				</a-col>
			</a-row>

		<hr>
		<table border="1" align="center" 
			@click="click">
			<tr v-for="tr in trs">
				<td v-for="(td, index) in tr"
				:style="getStyle(td)"
				@click.prevent.stop="click($event, td, index, tr)"
				@mousedown.prevent.stop="mousedown($event, td, index, tr)" 
				@mouseover.prevent.stop="mouseover($event, td, index, tr)"
				@mouseup.prevent.stop="mouseup($event, td, index, tr)" 
				:rowspan="td.rowspan" :colspan="td.colspan">{{td.text}}&nbsp;</td>
			</tr>
		</table>
		<hr>
		<input type="button" @click="showData" />
	</div>


	<script>

		let tb = new TableObjectBuster(getNanny())

		Vue.config.devtools = true
		new Vue({
			el: '#app',
			data() {
				return {
					flagMouseDown: false,
					mouseMoveTd: [null, null],
					lastClickTd: null,

					tb,
					trs: [
						[
							{
								colspan: 1,
								rowspan: 1,
								text: 'A'
							},
							{
								colspan: 1,
								rowspan: 2,
								text: 'B'
							}
						],[
							{
								colspan: 1,
								rowspan: 1
							}
						]
					]
				}
			},
			mounted() {
				this.tb.init(this.trs)
			},
			methods: {
				showData() {
					console.dir(this.tr)
				},
				insertLeft() {
					if (!this.lastClickTd) {
						alert('请选择单元格')
						return;
					}
					this.tb.insertCell(this.lastClickTd, this.tdInsertInjecter)
				},
				insertTop() {
					if (!this.lastClickTd) {
						alert('请选择单元格')
						return;
					}
					this.tb.insertRow(this.lastClickTd, this.tdInsertInjecter)
				},
				split() {
		            this.tb.split(this.lastClickTd, 
		                function(td, offsetRow, offsetCell, obj, tr){
		                    td.innerText = `split in (${offsetRow}, ${offsetCell})`
		                    return td
		                }
		            );
		            this.clearLastChild()
		            this.clearStyle('over')
				},

				// EVENT
				mousedown(event, td) {
					// const el = event.target
					// if (el.tagName == 'TD') {
					this.flagMouseDown = true
					this.clearStyle()
					this.mouseMoveTd[0] = td
					// }
				},
				mouseover(event, td) {
					if (this.flagMouseDown) {
						this.mouseMoveTd[1] = td
						let tdRange = this.tb.findAreaTd(...this.mouseMoveTd)
						this.clearLastChild()
						tdRange.forEach(td => {
							td.over = true
						})
						this.updateTrs()
					}
				},
				mouseup(event, td) {
					const el = event.target
					if (el.tagName == 'TD') {
						this.flagMouseDown = false
					}
				},
				click(event, td, index, tr) {
					if (!td) {return}
					this.clearLastChild()
					td.click = 1
					this.lastClickTd = td
					this.updateTrs()
				},

				// 因为初始数据不存在属性 click和over，所以需要强制更新
				updateTrs() {
					this.$forceUpdate()
				},
				getStyle(td, index, tr) {
					let ret = ''
					if (td.click) {
						ret += 'background-color: yellow;'
					}
					if (td.over) {
						ret += 'background-color: green;'
					}
					return ret
				},
				clearStyle() {
					
				},
				clearLastChild() {
					// clear over
					this.trs.forEach(tr => {
						tr.forEach(td => {
							td.over = 0
						})
					})
					// 
					if (this.lastClickTd) {
						this.lastClickTd.click = 0
					}
					this.lastClickTd = null
				},

				tdAppendInjecter(newTd, rowIndex, cellIndex, obj, row) {
					newTd.innerText = `APPEND(${rowIndex + 1}, ${cellIndex + 1})`
					return newTd
				},
				tdInsertInjecter(newTd, rowIndex, cellIndex, obj, row) {
					newTd.innerText = `INSERT(${rowIndex + 1}, ${cellIndex + 1})`
					return newTd
				},


				// ROUND 2
				insertRight() {
					if (this.lastClickTd) {
						const tb = this.tb
						// 检查是否最后一个
						const nextTd = tb.findTheTdNext(this.lastClickTd)
						if (!nextTd) {
							tb.addCellToAllRow()
						} else {
							tb.insertCell(nextTd)
						}
					}
				},
				insertBottom() {
					if (this.lastClickTd) {
						const tb = this.tb
						// 检查是否最后一个
						const td = tb.findTheTdUnder(this.lastClickTd)
						if (!td) {
								tb.addNewRow()
						} else {
								tb.insertRow(td)
						}
					}
				},
				mergeTo(dir) {
					const tb = this.tb
					const lastClickTd = this.lastClickTd
					let td = null
					switch(dir) {
						case 0:
							td = tb.findTheTdAbove(lastClickTd)
							break
						case 1:
							td = tb.findTheTdNext(lastClickTd)
							break
						case 2:
							td = tb.findTheTdUnder(lastClickTd)
								break
						default:
							td = tb.findTheTdPrev(lastClickTd)
					}
					if (td) {
						tb.merge(lastClickTd, td)
					}
				}
			}
		})
	</script>
</body>
</html>